<template>
	<div>
		<city-header></city-header>
		<city-search :cities="cities"></city-search>
		<city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
		<city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
	</div>
</template>
<script>
// 引用axios发送ajax请求
import axios from 'axios'
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
import CityAlphabet from './components/Alphabet'
export default {
  name: 'City',
  components:{
  	CityHeader,
  	CitySearch,
  	CityList,
  	CityAlphabet
  },
  data (){
  	return{
  		cities:{},
  		hotCities:[],
      letter:'' //父组件向子组件传值通过属性的方式
    }
  },
  methods:{
    getCityInfo(){
      // axios获取json数据
      axios.get('/api/city.json').then(this.handleGetCityInfoSucc)
    },
    // 获取城市信息成功后的回调
    handleGetCityInfoSucc(res){
      res = res.data;
      if(res.ret && res.data){
        const data = res.data;
        this.cities = data.cities;
        this.hotCities = data.hotCities;
      }
    },
    // 接收子组件传过来的值
    handleLetterChange (letter){
      this.letter = letter;
    }
  },
  mounted (){
    this.getCityInfo()
  }
}
</script>
<style scoped>
	
</style>